Calvosaez me preguntaba como añadir una imagen de fondo a la sidebar.
He recordado una entrada de Rosa donde explica como añadir una ´´sidebar colorida`` basándose en las explicaciones de Blogger Hacked
Rosa le añade algún extra a la CSS para personalizar la sidebar, ya su vez voy a darle un retoque para intentar así esclarecer un poco las dudas de Calvosaez.
En un principio le añadiremos color a la sidebar con el truco original de Blogger Hacked.
Nos debemos situar en Plantilla/HTML vamos a añadir justo encima de ]]></b:skin> lo siguiente:
.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}
Luego justo antes del </head> de la plantilla añadimos este código:
<script src='http://bloggerhacked.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://bloggerhacked.googlepages.com/evenodd.js' type='text/javascript'></script>
El resultado sería algo así:

Si deseamos añadir un borde o redondear las esquinas Rosa nos propone añadir lo siguiente:
.even {
background-color: #EEEEEE;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
.odd {
background-color: #AAAAAA;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
El resultado sería el siguiente:

Ahora vamos a dar solución a Calvosaez con la idea de añadir una imagen de fondo.
Nos situaremos en el primer código añadido osea en:
.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}
Y agregaremos background:url('aquí la url de la imagen'); en lugar de background-color: #AAAAAA; y background-color: #EEEEEE; de manera que quedaría asi:
.even {
background:url('aquí la url de la imagen');
}
.odd {
background:url('aquí la url de la imagen');
}
El resultado sería más o menos este:

Recordad que la opción de añadir color hará que cada nuevo elemento añadido en la sidebar aparezca envuelto en un cuadro donde podéis alternar colores escogidos previamente.
!Suerte¡
Gracias Gema te devo una, ya te contare como me queda, creo que voy a tener poco tiempo estos dos meses que entran pero lo dejo grabado para practicarlo, saludos
Que tu ausencia sea para bien ;)
Hola Gema, ante todo gracias, yo hago un blog de ayuda para los usuarios de mi cibercafé... que la necesitan bastante... jajaja, en este caso yo también, así que agradacerte tu ayuda y sobre todo tu amabilidad. ¡Sigue así!
Saludos y bienvenido shit happens me alegra que te sea de utilidad lo que encuentras aquí.
Otro día déjame la url de tu blog me gustará verlo ;)
Hola Gema, ¡gracias por no llamarme shit! he de recordar cambiarme el nick jajaja... precisamente ahora estoy añadiendo una linea a la sidebar según tus explicaciones, la verdad que por más inútil que soy, gracias a ti sólo puede salirme bien... mi nombre es vanessa y el blog que hago para el ciber se llama clavedesolcibercafe, alojado en blogspot... acabo de añadir tambien un montón de libros para descargar (irá creciendo la lista) así que sois bienvenidos a visitarlo (no flipéis con las entradas, explico conceptos hiperbásicos porque es lo que la mayoria necesita cuando llega al ciber). Gracias y ¡allá voy a por la líea de la sidebar! Un saludo enorme a todos en quienes pervive ese espléndido espiritu de cooperación.
Gracias Vanessa es un gran trabajo el que estás realizando.
Si me necesitas ya sabes donde encontrarme ;)
Hola gema, buen blog..
mira el truco no me funciona, pero creo que ya encontre el problrma.
Al intentar acceder directamente alos scripts en googlepages me sale que la banda ancha se a exedido,, podrias mandarelos a mi mail, por favor,
hc.0000111@gmail.com
Pues ahora mismo están funcionando HC.0000111 :D
Gema, gracias por tu blog... Nos hace a muchos las cosas mas faciles... Tengo un problema, no quiero la sidebar con un fondo, solo quiero el borde ¿que hago?
Klgo. Alexis Moya R. menudo nombrecito eh :)
Si deseas un borde en la sidebar puedes ver como hacerlo aquí, si es una sola línea aquí, si el borde es redondeado aquí.
La imaginación cuenta mucho a la hora de personalizar el blog, me sorprende gratamente ver como de una pequeña explicación añaden algo nuevo.
¿Me avisas que vea el resultado? ;)
Hola gem@ mira quiero ponerle una imagen a la sidebar, pero el script ese ya no funciona, ha extralimitado el limite de banda, donde puedo conseguirlo?
Para alojarlo en mi servidor tengo que encontrarlo primero, sino como hago??
Tambien quiero poner una imagen de fondo en el main, pero todavía no se como hacerlo, si me das una mano te agradecería, es para un blog nuevo que estoy haciendo, las imagenes ya las tengo pero no se como ponerlas ni donde, la plantilla es la minima como la tuya.
Besooootes! ;)
Es cierto k_nelita y desde que he leído tu comentario no he parado de darle vueltas pero según el autor ya no está en funcionamiento por sobrepasar la banda ancha de Google Pages.
Ahora bien, si lo que deseas es añadir una imagen a la sidebar puedes hacerlo añadiendo unas líneas a la CSS mira esta entrada y compruébalo ;)
En el main es más o menos lo mismo sólo que en vez de añadir las líneas de código en #sidebar-wrapper hay que hacerlo en #main-wrapper {
Este cambio en #main-wrapper { hará que la imagen ocupe todo el largo del main, si deseas que ocupe solamente el espacio de las entradas debes añadir las líneas de código en .post {
El cambio es increíble para el poco trabajo que representa, ve mirando en vista previa y verás los resultados.
Quiero ver la obra de arte eh ;)
Ahora me pongo a esto, pero ve mirando mi otra obra que recién terminé, los emoticones en una imagen junto con los html y todo lo demás, juaaa, es un poco grande la imagen pero así la gente se entera de lo que puede utilizar, al menos si son tan burros como yo,:D que nunca se como se hacen los emoticones, creo que lo expuse muy claramente.
Besotes gem@ gracias por todo, me voy a seguir trabajando con lo que me has dicho a ver que sale ;)
Quedan estupendos :)
La verdad qué tu blog es fantástico, te felicito, de corazón.
Te digo, necesito saber como haces para poner en la parte del sidebar que dice " Traductor, Blogroll " etc; poniendo una imagen..
Si podés averiguar, avisame...
Te mando un saludo.
Hola Emiliano bienvenido.
Para personalizar los títulos de la sidebar hay varias opciones una de ella la de la imagen y puedes verlo como primer ejemplo en esta entrada.
Si te asaltan dudas házmelo saber ;)
Acabo de ver esta entrada y me parece muy buena, pero la falla que le veo al código es que sólo funciona con Firefox, Safari y Google Chrome. ¿No tendrás alguno que sirva para el resto de los navegadores?
Puma de Sangre Azul las redondeces en Explorer no son nada sencillas, sin embargo hay una entrada de J.MIur que te puede interesar.
(Mira aquí)
Hola! me gusta tu blog =D es buena la explicación solo q tengo una duda... lo q pasa esq yo kiero ponerle un dondo a mis widgets... el mismo a todos pero dond lo ago keda cortado, no llega asta el final d cada widget o si no le falta xq el alto es menos q la imagen q pongo...
quisiera q me dijeras como acerle para q la imagen ocupe todo el alto de los wigets... sin repetirc, q se stire o contraiga segun sea necesario, x asi decirlo
espero puedas respondrme xq stube tratando pero no pude u.u si no me ntiends pasa a mi blog y ve como me keda... http://aradeus-geornio.blogspot.com/
d antemano gracias!!!
Necros Giovanni hasta donde yo sé eso no puede hacerse con una sola imagen, es difícil que una imagen vaya extendiéndose.
Si añadimos una image tipo textura o degradado no sería problema porque se repite y se muestra siempre igual, de no ser así es necesario tres imágenes una para el encabezado, otra para el cuerpo y la última para añadirla al final del gadget ;)
muchas gracias x aclararmelo ^^ bueno, en ese caso solo kizierda q me dijeras como poner una imagen al final de el gadget (si se puede q kede para todos la misma mejor) te lo agradeseria mucho xq no encontre tampoco ningun titorial para eso
GRACIAS d nuevo x todo y x responder tan rapido
Pero depende de la imagen Necros mira por ejemplo este blog de k_nelita http://folktan.blogspot.com/
Esa imagen está añadida en la css, la parte de .sidebar .widget
.sidebar .widget{
background: #FFFFFF url(aquí-url-de-la-imagen) no-repeat left top;
margin:0 0 0.7em;
padding:10px;
}
Todo depende de la imagen, si es una textura simplemente se añade
background: #000 url(aquí-url-de-la-imagen);
Hola! gracias por tu post, me sirvió mucho... ahora resta un solo inconveniente, necesito que el texto del título comience unos milimetros despues que la imagen de fondo de los widgets; podrías ayudarme con eso? Un saludo, Gracias!
3705 Necesito ver tu blog para eso ;)
Ok, esta es la dirección: http://postabanana.blogspot.com/
Un saludo y muchas gracias!
hola gema, ya aplique este efecto en mi blog y accidentalmente me quedo perfecto con la imagen de fondo de los titulos de cada widget.
Ahora me interesaria aplicar exactamente lo mismo pero en cada post.
Yo fui probando varias posibilidades sin lograr nada, ya que yo quiero que abarque el titulo, las etiquetas, el contenido y los comentarios
( 0 comentarios ).
El blog al que me refiero es http://pablorizia.blogspot.com, desde ya muchas gracias
yz Que abarque todo es muy dificil P4BLQ porque se trata de una imagen, y esa parte que dices se divide en tres. Título, contenido de la entrada y pos-footer.
Si añades la imagen en cualquiera de ellos no cubrirá todo el contenido se vería cortada :(
y agregarle color en ves de una imagen pero aplicadno este efecto seria lo mismo?
yz El efecto de esquinas redondeadas y darle color si puede aplicarse.
Mira esta entrada:
http://gemablog-.blogspot.com/2008/08/dividir-secciones-con-css.html
Para que cubriera todo el post (Título, contenido y pos-fotter) sería añadir en los estilos del
post lo siguiente:
.post {
aquí estarían tus estilos..
aquí estarían tus estilos..
aquí estarían tus estilos..
background:#000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
yz Me olvidaba decirte que el efecto esquinas redondeadas de esa forma solo se visualiza en Firefox, con Explorer las esquinas se visualizan líneas rectas :(
Gracias por la ayuda que ofreces.
Tengo qe acabar de diseñar el blog. Lo hago poco a poco y disfruto de los resultados.
Dejo este mensaje para que sepas que has ayudadoa una más.
Saludos!!!
Si quieres, puees echar unvistazo.
Gracias por la ayuda que ofreces.
Tengo qe acabar de diseñar el blog. Lo hago poco a poco y disfruto de los resultados.
Dejo este mensaje para que sepas que has ayudadoa una más.
Saludos!!!
Si quieres, puees echar unvistazo.
yz Me alegra mucho Pilar :)
(falta porquito para tu santo)
¡¡ F e l i c i d a d e s !!
no entiendo bien el codigo de imagen de fondo de sidebar. me darías un ejemplo?
yz Eclipsada mejor mira esta entrada, está creado con CSS y no es necesario script.
Lee donde dice "Si en lugar de añadir color queremos añadir una imagen de fondo bastará con sustituir background:#cc9999; por background:url('url-de-tu-imagen');"
hola gem@, quería saber si es posible rellenar los espacios de relleno del formulario con color en http://wanttobuymywork.blogspot.com.
thankiu
:: Es algo que desconozco lk :(
vale. no pasa nada. así igual queda "mono".
hola gem@, me gustaría añadir color solo a un widget de la sidebar. sé que es posible porque ya lo hice, pero ahora mismo no recuerdo cómo... el santo se me va al cielo todos los días un ratito... ayzzz
:: Mira esta entrada:
http://gemablog-.blogspot.com/2009/05/anadir-estilos-un-gadget.html ;)
Eres la mejor, llevo 2 horas ya hasta que no te encontré no dí con ello! Gracias de verdad!
:: Hola K, me alegra que resultara bien :)
Muy buenas Gemma, voy a guardarme el link de esta pagina, porque estoy empezando a aprender Html y la verdad es que ya he venido a este blog varias veces.
En fin, quisiera hacerte varias preguntas:
Primera es que en mi blog http://laincreiblevulnerabilidaddelser.blogspot.com/ el fondo central se queda a mitad del sidebar, con lo que al cambiar el color de fondo no lo consigo con la otra parte del sidebar.
Segundo es que he utilizado el codigo que has puesto aqui, y me ha funcionado la primera vez, pero a partir de ahi, cuando vuelvo a cargar la pagina ya no aparece.
Y tercera y ultima, ayer estuve buscando un "Show last comments" widget en español, porque el que tengo, que es de blogger, esta en ingles y queda un poco desafinado. Y he visto que el tuyo esta muy bien. He mirado en el codigo fuente de tu pagina pero no he conseguido sacar nada, si me dices donde lo puedo conseguir... Ya te agregaria en favoritos y todo.
Muchas gracias por la ayuda ya prestada.
Un saludo
:: Saludos lomaja el problema de la imagen no consigo localizarlo ni con Firefox ni Explorer, a lo mejor lo has solucionado ya y llego tarde.
Sobre personalizar la sidebar para darle color sigue mejos en siguiente %% enlace no te dará problemas.
Lo que entiendo como Show last comments son los últimos comentarios, o comentarios recientes, eso puedes verlo en este otro %% enlace tal y como yo lo tengo añadido :)
Hola Gema, quería hacerte una consulta...he puesto tres widgets a modo de botÓn, enlazados cada uno con una pagina estática...(creo que es eso)pero la imagen del boton se me queda demasiado a la derecha, es decir, no queda centrada con respecto a los demás widgets que vienen debajo...y no se como arreglarlo...
si me pudieras dar alguna idea...
muchas gracias!!
:: Hola Nona, si quedan centrados lo que ocurre que los botones tiene un fondo de color que forma parte de la imagen por eso quedan centrados.
Mira la imagen: http://lh3.ggpht.com/_ujJR5M74kL8/S_2YM0IWNTI/AAAAAAAACWo/E6cb87K4X4A/botoncontacto260.gif
Muy interesante. Justamente me estaba preguntado si era posible ponerle fondo a la sidebar, pero ahora tengo una pregunta ¿mas o menos de cuanto aconsejas que sea la imagnen= a mi me gustaria hacer un fondo con bordes, pero se me hace que si lo hago con bordes, no se ajustaria a la medida del alto de la sidebar, y en el futuro, cuando quisiera ñadir mas elemento en la sidebar, el fondo no le quedaria tan bien :(
:: Kaede eso que deseas hacer no lo he probado pero tiene solución, se crean tres imágenes, una para la parte superior, otra central (que es la que visualmente va alargando conforma añadimos gadgets) y una tercera imagen que se añade en la parte inferior.
Si no recuerdo mal fue Oloman de el que hizo una entrada tipo tutorial http://oloblogger.blogspot.com/
Ya veo. Intente hacer lo que explica esta entrada, y todo me hubiera salido fantastico, si no hubiera sido porque tengo un singinbox en la barra lateral (una lista de reproducciones), y cuando puse todos los codigos, me di conque no dejaba que presiones lo botosnes :(, pero bueno, ya vere que otra cosa intento :D.
PS: gracias por intentarme ayudar con el link
:: Seguro que Oloman sabe explicarte mejor que yo porque hico un tutorial muy completo con imágenes :)
he de decir que esto es una gran mierda no me ha ayudado absolutamente en nada ni explica claramente lo que hay que hacer
Es curioso, pero te has parado a pensar que esta mierda le ha funcionado a otros con la misma explicación??
Hola, perodn por las molestia, consulta en style para poder agregar bottom img como puedo hacer?
Intente de todo :'(. Gracias Saludos.
Nota: solo los miembros de este blog pueden publicar comentarios.